JavaScript Nullish Coalescing: Toewijzing van Standaardwaarden vs. Verwerking van Falsy Waarden

JavaScript-ontwikkelaars moeten vaak standaardwaarden toewijzen aan variabelen wanneer de oorspronkelijke waarde ontbreekt of ongeldig is. Traditioneel werd hiervoor de logische OR-operator (||) gebruikt. Echter, de nullish coalescing operator (??), geïntroduceerd in ECMAScript 2020, biedt een preciezere en betrouwbaardere oplossing, vooral bij het omgaan met falsy waarden. Deze uitgebreide gids verkent de nuances van nullish coalescing, vergelijkt deze met de logische OR-operator en toont de toepassingen ervan in verschillende scenario's.

Nullish Coalescing (??) Begrijpen

De nullish coalescing operator (??) retourneert zijn rechter operand wanneer zijn linker operand null of undefined is. Anders retourneert hij zijn linker operand. In eenvoudigere termen biedt het alleen een standaardwaarde wanneer de variabele expliciet null of undefined is.

Syntaxis:

leftOperand ?? rightOperand

Voorbeeld:

            const name = null ?? "Guest";
console.log(name); // Output: "Guest"

const age = undefined ?? 25;
console.log(age); // Output: 25

const score = 0 ?? 100;
console.log(score); // Output: 0

            

              
                Copy
              
            
          

Het Onderscheid Tussen Nullish Coalescing (??) en Logische OR (||)

De logische OR-operator (||) biedt ook een manier om standaardwaarden toe te wijzen. Echter, deze behandelt elke falsy waarde (false, 0, '', NaN, null, undefined) als equivalent aan null of undefined, wat mogelijk tot onverwacht gedrag kan leiden.

Voorbeeld Logische OR:

            const quantity = 0 || 10;
console.log(quantity); // Output: 10 (onverwacht, aangezien 0 falsy is)

const message = '' || "No message";
console.log(message); // Output: "No message" (onverwacht, aangezien '' falsy is)

            

              
                Copy
              
            
          

Voorbeeld Nullish Coalescing:

            const quantity = 0 ?? 10;
console.log(quantity); // Output: 0 (correct, aangezien 0 niet null of undefined is)

const message = '' ?? "No message";
console.log(message); // Output: "" (correct, aangezien '' niet null of undefined is)

            

              
                Copy
              
            
          

Zoals u kunt zien, treedt de nullish coalescing operator alleen in werking wanneer de linker operand expliciet null of undefined is, waardoor falsy waarden zoals 0 en '' behouden blijven.

Toepassingsgevallen voor Nullish Coalescing

Nullish coalescing is bijzonder nuttig in scenario's waarin u onderscheid moet maken tussen een ontbrekende waarde (null of undefined) en een geldige falsy waarde.

1. Beheren van Configuratie-opties

Bij het omgaan met configuratie-opties wilt u misschien standaardwaarden opgeven voor instellingen die niet expliciet zijn gedefinieerd. Het gebruik van ?? zorgt ervoor dat geldige falsy waarden (bijv. 0 voor een time-outwaarde) niet per ongeluk worden vervangen door de standaardwaarde.

            const config = {
  timeout: 0,
  maxRetries: null,
  apiEndpoint: undefined
};

const timeout = config.timeout ?? 5000; // Gebruik 0 als de time-out expliciet is ingesteld, anders standaard 5000
const maxRetries = config.maxRetries ?? 3; // Gebruik 3 als maxRetries null of undefined is
const apiEndpoint = config.apiEndpoint ?? "https://example.com/api"; // Gebruik standaard eindpunt als apiEndpoint null of undefined is

console.log(`Timeout: ${timeout}, Max Retries: ${maxRetries}, API Endpoint: ${apiEndpoint}`);
// Output: Timeout: 0, Max Retries: 3, API Endpoint: https://example.com/api

            

              
                Copy
              
            
          

2. Werken met API-responses

API-responses bevatten vaak velden die mogelijk ontbreken of expliciet ingestelde falsy waarden hebben. Met nullish coalescing kunt u deze scenario's correct afhandelen, zodat u alleen standaardwaarden opgeeft wanneer een veld echt ontbreekt.

Voorbeeld: Een vereenvoudigde API-response die een gebruiker vertegenwoordigt:

            const user = {
  name: "Alice",
  age: 30,
  countryCode: null,
  acceptedTerms: false,
  profilePictureURL: undefined
};

const displayName = user.name ?? "Unknown User";
const userAge = user.age ?? "Age not available";
const country = user.countryCode ?? "US"; //Standaard naar US indien null/undefined
const hasAcceptedTerms = user.acceptedTerms ?? true; //Standaard naar true indien null/undefined
const profilePic = user.profilePictureURL ?? "/default-profile.png"; //Standaard afbeelding indien null/undefined

console.log(`Name: ${displayName}`); // Output: Name: Alice
console.log(`Age: ${userAge}`); // Output: Age: 30
console.log(`Country: ${country}`); // Output: Country: US
console.log(`Accepted Terms: ${hasAcceptedTerms}`); // Output: Accepted Terms: false
console.log(`Profile Picture: ${profilePic}`); //Output: Profile Picture: /default-profile.png

            

              
                Copy
              
            
          

In dit voorbeeld stellen we de standaard in op "US" alleen als `countryCode` expliciet `null` of `undefined` is. Als de API `countryCode: ""` zou retourneren, dan zou de lege string behouden blijven, wat de werkelijke (hoewel mogelijk ontbrekende) landcode van de gebruiker weerspiegelt.

3. Fallback-waarden Bieden in Functies

Bij het schrijven van functies die optionele parameters accepteren, kan nullish coalescing worden gebruikt om standaardwaarden voor ontbrekende argumenten op te geven.

            function greet(name, greeting) {
  const displayName = name ?? "Guest";
  const salutation = greeting ?? "Hello";
  return `${salutation}, ${displayName}!`;
}

console.log(greet("Bob", "Good morning")); // Output: Good morning, Bob!
console.log(greet(null, undefined)); // Output: Hello, Guest!
console.log(greet("", "")); // Output: , !
console.log(greet("", null)); // Output: Hello, !

            

              
                Copy
              
            
          

Deze aanpak zorgt ervoor dat de functie altijd een waarde heeft om mee te werken, zelfs als de oproeper niet alle argumenten opgeeft.

4. Internationalisatie en Lokalisatie (i18n/l10n)

Wanneer u met geïnternationaliseerde applicaties werkt, heeft u vaak verschillende vertalingen voor diverse strings. Nullish coalescing kan worden gebruikt om een standaardvertaling te bieden als een specifieke vertaling voor een bepaalde taal ontbreekt.

            const translations = {
  en: {
    greeting: "Hello",
    farewell: "Goodbye"
  },
  fr: {
    greeting: "Bonjour"
  }
};

function translate(key, language) {
  return translations[language]?.[key] ?? translations.en[key] ?? `Translation missing for key: ${key}`;
}

console.log(translate("greeting", "fr")); // Output: Bonjour
console.log(translate("farewell", "fr")); // Output: Translation missing for key: farewell
console.log(translate("greeting", "de")); // Output: Hello (valt terug op Engels)

            

              
                Copy
              
            
          

In dit voorbeeld proberen we eerst de vertaling voor de opgegeven taal en sleutel te vinden. Als die ontbreekt, vallen we terug op de Engelse vertaling. Als zelfs de Engelse vertaling ontbreekt, retourneren we een bericht dat aangeeft dat de vertaling ontbreekt.

5. Verwerken van Gebruikersinvoer in Formulieren

Bij het verwerken van gebruikersinvoer uit formulieren kunt u gevallen tegenkomen waarin bepaalde velden leeg zijn gelaten of lege strings bevatten. Het gebruik van de nullish coalescing operator in combinatie met de optional chaining operator (?.) kan zeer effectief zijn bij het omgaan met diep geneste gebruikersinvoer.

            const formData = {
  user: {
    name: "",
    address: {
      city: null,
      country: undefined
    }
  }
};

const userName = formData.user.name || "No Name Provided";
const safeUserName = formData?.user?.name ?? "No Name Provided";
const userCity = formData?.user?.address?.city ?? "City Unknown";
const userCountry = formData?.user?.address?.country ?? "Country Unknown";

console.log(userName); // No Name Provided (omdat een lege string falsy is)
console.log(safeUserName); // "" (omdat safeUserName expliciet controleert op null of undefined)
console.log(userCity); // City Unknown
console.log(userCountry); // Country Unknown

            

              
                Copy
              
            
          

Operator-prioriteit en Combineren met Andere Operatoren

De nullish coalescing operator heeft een relatief lage operatorprioriteit. Dit betekent dat u vaak haakjes moet gebruiken om ervoor te zorgen dat deze correct wordt geëvalueerd, vooral in combinatie met andere operatoren zoals logische AND (&&) of logische OR (||).

Belangrijke opmerking: U kunt ?? niet rechtstreeks combineren met && of || zonder haakjes te gebruiken. Dit is om dubbelzinnigheid in de volgorde van de bewerkingen te voorkomen.

Correct Gebruik:

            const value = (someValue ?? 10) && true;
console.log(value); //Output: true als someValue niet null of undefined is, anders false

const result = (null ?? 5) + 10; // Output: 15

            

              
                Copy
              
            
          

Incorrect Gebruik (Zal resulteren in een SyntaxError):

            // const value = someValue ?? 10 && true; // SyntaxError: Unexpected token '&&'

// const result = null ?? 5 + 10; // SyntaxError: Unexpected number

            

              
                Copy
              
            
          

Browsercompatibiliteit

De nullish coalescing operator (??) is een relatief recente toevoeging aan JavaScript. Zorg ervoor dat uw doelbrowsers deze ondersteunen. De meeste moderne browsers ondersteunen het, maar oudere browsers vereisen mogelijk transpilatie met tools zoals Babel.

Om de browsercompatibiliteit te controleren, kunt u bronnen raadplegen zoals MDN Web Docs.

Best Practices voor het Gebruik van Nullish Coalescing

• Gebruik het wanneer u onderscheid moet maken tussen ontbrekende waarden (null of undefined) en geldige falsy waarden.
• Gebruik altijd haakjes wanneer u ?? combineert met && of || om syntaxisfouten te voorkomen en een correcte evaluatie te garanderen.
• Houd rekening met de browsercompatibiliteit en overweeg indien nodig transpilatie.
• Documenteer uw gebruik van ?? duidelijk om de leesbaarheid van de code te verbeteren.
• Test uw code grondig om ervoor te zorgen dat standaardwaarden in alle scenario's correct worden toegewezen.

Conclusie

De nullish coalescing operator (??) is een krachtige en waardevolle toevoeging aan de JavaScript-taal. Het biedt een preciezere en betrouwbaardere manier om standaardwaarden toe te wijzen in vergelijking met de traditionele logische OR-operator (||), vooral bij het omgaan met falsy waarden. Door de nuances en best practices te begrijpen, kunt u schonere, robuustere en beter onderhoudbare JavaScript-code schrijven. Overweeg om ?? in uw projecten te gebruiken om de duidelijkheid en nauwkeurigheid van uw standaardwaardetoewijzingen te verbeteren. Vergeet niet uw code grondig te testen in verschillende browsers en transpilatie te overwegen voor oudere omgevingen.

Deze gids bood een uitgebreid overzicht. Experimenteer met ?? in verschillende contexten om de mogelijkheden en beperkingen volledig te begrijpen, en verfijn uw begrip voortdurend door praktische toepassing.